<template>
<div class="u-panel">
  <div class="u-search">
    <div class="search-filter">
      <el-select v-model="type" size="medium" placeholder="请选择" @change="getSettled()">
        <el-option v-for="(k, v) in dims.MY_SETTLED" :key="v" :label="k" :value="v">
        </el-option>
      </el-select>
      <el-select v-model="filterStatus" clearable size="medium" placeholder="请选择" @change="getFilter()">
        <el-option key="all" label="全部" value=""></el-option>
        <el-option v-for="(k, v) in dims.AUDIT_STATUS" :key="v" :label="k" :value="v">
        </el-option>
      </el-select>
    </div>
    <div class="fast-solt" @click="settled()">
      <el-button type="primary" size="medium" plain>快捷投放</el-button>
    </div>
  </div>
  <div class="contents">
    <div v-if="datas && datas.length > 0" class="c-notes">
      <div v-for="(item, index) in datas" class="c-header-note" :key="index">
        <div class="c-header">
          <span class="img-name">
            <img :src="item.img" />
            <p>{{ item.name }}</p>
          </span>
          <span :class="'audit_status audit_status_' + item.status">
            <el-tag :type="getTagType(item.status)">
              {{ dims.DEAL_WITH_STATUS[item.status] }}
              <i>
                <svg-icon :icon-class="getIcon(item.status)"></svg-icon>
              </i>
            </el-tag>
          </span>
          <div class="c-del" @click="del(item.id)">
            <span class="apply-time">
              {{ item.applyTime }}
            </span>
            <span class="del-btn">
              <svg-icon icon-class="delete_5"></svg-icon>
            </span>
          </div>
        </div>
        <p class="c-note">
          <img :src="item.thumbnail" @click="sa.showImage(item.thumbnail, '800px', '600px')" />
          <span @click="settled(item)">{{ item.note }}</span>
        </p>
      </div>
    </div>
    <div class="c-notes" v-else>
      <div class="c-no-data">
        暂无数据
      </div>
    </div>
  </div>
</div>
</template>

<script>
import sa from '@/sa-frame/sa';
export default {
  name: 'u-settled',
  data() {
    return {
      type: '1',
      dims: sa.$sys.getCurd(),
      filterStatus: '',
      dataList: [],
      datas: []
    }
  },
  components: {},
  created: function () {
    this.f5()
  },
  methods: {
    // 获取入驻信息
    f5() {
      sa.ajax('/my/settled/' + this.type, function (res) {
        this.dataList = res.data;
        this.getFilter()
      }.bind(this), {
        type: 'get'
      });
    },
    // 切换标签
    getSettled() {
      this.f5()
    },

    // 动态过滤
    getFilter() {
      if (this.filterStatus) {
        this.datas = this.dataList.filter((dt) => dt.status === Number(this.filterStatus))
      } else {
        this.datas = this.dataList
      }
    },

    // 获取第一个字
    getIcon(code) {
      return code === 0 ? 'indeterminate_circle_1' : code === 1 ? 'checkbox_circle' : 'close_circle'
    },
    // 获取标签样式
    getTagType(status) {
      if (status === -1) {
        return 'info'
      } else if (status === 0) {
        return 'primary'
      } else if (status === 1) {
        return 'success'
      } else {
        return 'danger'
      }
    },

    // 入驻
    settled(item) {
      switch (this.type) {
        case '2':
          sa.showModel('投放广告', () => import('@/views/scs/apply/ads'), {
            item: item || {}
          });
          break;
        default:
          sa.showModel('投放资源', () => import('@/views/scs/apply/rsr'), {
            item: item || {}
          });
          break;
      }
    },

    // 删除
    del(id) {
      let url;
      switch (this.type) {
        case '2':
          url = '/ads/apply/delete';
          break;
        default:
          url = '/rsr/apply/delete';
          break;
      }
      sa.confirm('是否删除，此操作不可撤销', function () {
        sa.ajax(url, {
          id: id
        }, function (res) {
          sa.ok(res.msg);
          this.f5();
        }.bind(this), {
          type: 'get'
        })
      }.bind(this));
    },
  },
}
</script>

<style scoped>
.u-panel {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.u-search {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  height: 10%;
  width: 100%;
}

.search-filter {
  display: flex;
  align-items: center;
  width: 80%;
  height: 100%;
}

.el-select {
  margin-right: 10px;
}

.fast-solt {
  display: flex;
  justify-content: flex-end;
  width: 20%;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  color: #001e33;
}

.contents {
  height: 90%;
  width: 100%;
  border-radius: 5px;
}

.c-notes {
  height: 100%;
  overflow: auto;
  padding: 0px 1px;
}

.c-header-note {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  border-radius: 5px;
  padding: 5px 0px;
  cursor: pointer;
  margin-bottom: 10px;

  &:hover {
    transition: all 0.5s;
    box-shadow: 0px 0px 2px 1px #ebebeb;
    transform: translate(0%, 2%);
  }
}

.c-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 5px;
}

.c-note {
  text-indent: 2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 0px;
}

.img-name {
  display: flex;
  justify-content: start;
  align-items: center;
  color: #aaaaaa;
  font-weight: 400;
  margin: 1px 10px 1px 4px;
  width: 55%;
  white-space: nowrap;
  overflow: hidden;
}

img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}

.c-del {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 35%;

  .apply-time {
    margin-right: 10px;
    color: #aaaaaa;
  }

  .del-btn {
    color: red;
  }
}

.audit_status {
  width: 10%;
}

.audit_status_0 {
  color: #a3a2a2;
}

.audit_status_1 {
  color: #008412;
}

.audit_status_2 {
  color: #ff0000;
}

.c-no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
  color: #aaaaaa;
}
</style>
